<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>券维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>

<body>
    <div id="test4" class="demo-transfer"></div>
</body>

</html>
<style>
    .layui-transfer-box {
        width: 45% !important;
    }
</style>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate', 'transfer'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var admin = layui.admin;
        var setter = layui.setter;
        var laydate = layui.laydate;
        var transfer = layui.transfer;
        var controller = {
            data: {
                selectdata: {},
                relationlist: [],
                couponType: [{ id: 1, text: '满减券' }, { id: 2, text: '满折券' }, { id: 3, text: '立减券' }],//券类型
            },
            //初始化页面
            initpage: function () {
                var self = this;
                this.data.selectdata = parent.selectdata;

                Promise.all([this.getrightcoupon(), this.getcoupon()]).then(res => {
                    var rightlist = [];
                    res[0].data.forEach(a => {
                        rightlist.push(a.CouponId);
                        self.data.relationlist.push({
                            LevelId: self.data.selectdata.LevelId,
                            RightId: self.data.selectdata.RightId,
                            CouponId: a.CouponId
                        })
                    })

                    var leftlist = res[1].data;
                    leftlist.forEach(a => {
                        a.title = a.CouponName;
                        var filter = this.data.couponType.filter(b => { return b.id == a.CouponType; });
                        if (filter != null && filter.length > 0)
                            a.title += "(" + filter[0].text + ")";
                        a.value = a.CouponId;
                    });
                    //显示搜索框
                    transfer.render({
                        elem: '#test4'
                        , data: leftlist
                        , value: rightlist
                        , showSearch: true
                        , title: ['会员券', '权益券']
                        , onchange: function (obj, index) {
                            if (index == 0) {
                                obj.forEach(res => {
                                    self.data.relationlist.push({
                                        LevelId: self.data.selectdata.LevelId,
                                        RightId: self.data.selectdata.RightId,
                                        CouponId: res.CouponId
                                    })
                                })
                            }
                            else {
                                var temp = self.data.relationlist;
                                obj.forEach(res => {
                                    temp.forEach((item, index, arr) => {
                                        if (item.CouponId == res.CouponId) {
                                            arr.splice(index, 1);
                                        }
                                    })
                                    self.data.relationlist = temp;
                                })
                            }
                        }
                    })
                })
                this.initevent();
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20210728143245471/member/?view=layui&fun=" + fun;
                return url;
            },
            //初始化事件
            initevent: function () {
                var self = this;

                parent.getResult = function () {
                    return self.data.relationlist;
                }

            },
            //获取权益券 
            getrightcoupon: function (succ) {
                var self = this;
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: self.getbaseurl("member.getrightcoupon"),
                        method: "GET",
                        data: { levelId: self.data.selectdata.LevelId, rightId: self.data.selectdata.RightId },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            }, //获取券 
            getcoupon: function (succ) {
                var self = this;
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: self.getbaseurl("member.getcoupon"),
                        method: "GET",
                        data: {},
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            },
        }
        /*
        * 入口
        */
        controller.initpage();
    });

</script>